<template>
  <div class="main-layout">
    <!-- 头部 -->
    <Header />
    
    <div class="layout-content">
      <!-- 侧边栏 -->
      <Sidebar />
      
      <!-- 主内容区 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入独立的布局组件
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
</script>

<style scoped lang="less">
.layout-content {
  display: flex;
  min-height: calc(100vh - 64px - 48px);
  
  .main-content {
    flex: 1;
    padding: 20px;
    background-color: #f5f7fa;
    overflow-y: auto;
  }
}
</style>
    